<template>
  <page-frame class="product-list">
    <tabs :list='tab_menu' />
    <!-- 搜索 -->
    <div class="panel-box">
      <div class="panel-body">
        <search @search="search"/>
      </div>
    </div>
    
    <!-- 产品列表 -->
    <el-row class="bg-white sort-tab">
      <el-col :span="2" v-for="filter in sortTab" :key="filter.sort" >
        <span @click="changeSort(filter.sort)" :class="filter.sort == listFilter.sort ? 'c-main' : ''">
          {{filter.name}}<i class="ucai-icon" :class="'ucai-icon-' + filter.icon"></i>
        </span>
      </el-col>
    </el-row>
    <prod-list 
      :params="listFilter"
      @showDialog="checkToDialog"
    />
    <!-- 预定须知 -->
    <cate-notic
      :cate="cate"
      ref="dialog_cate"
    />
    <!-- 加价转发 -->
    <add-price
      :prod="add_prod"
      ref="dialog_price"
    />
    
    <!-- 二维码弹窗 -->
    <qrcode-d :prod="qr_prod" ref="dialog_qrcode" />
  </page-frame>
</template>
<script>
const SORT_TAB = [{
  name: '推荐排序',
  sort: 0,
  icon: 'xia'
}, {
  name: '销量最高',
  sort: 1,
  icon: 'xia'
},{
  name: '价格从低到高',
  sort: 2,
  icon: 'shang'
},{
  name: '价格从高到低',
  sort: 3,
  icon: 'xia'
}]
import Page from '@views_pc/components/frame'
import Tabs from "@cmpt_pc/tab"

import Search from "@views_pc/product/components/search"
import ProdList from '@views_pc/product/components/list-wrap'

import CateNotic from '@views_pc/product/components/cate-notic'
import QrcodeDialog from '@views_pc/product/components/qrcode-dialog'
import AddPrice from '@views_pc/product/components/add-price'

import {
  Row,
  Col,
} from 'element-ui'
export default {
  name: 'list',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Page.name]: Page,
    [Tabs.name]: Tabs,
    [ProdList.name]: ProdList,
    [CateNotic.name]: CateNotic,
    [QrcodeDialog.name]: QrcodeDialog,
    [AddPrice.name]: AddPrice,
    Search
  },
  data() {
    return {
      tab_menu: [{name: '产品预订', key: 0}],
      sortTab: SORT_TAB,
      listFilter: {
        sort: this.$getUrlParam('sort') || 0,
        zone_id: this.$getUrlParam('zone_id') || '-999',
        kind: this.$getUrlParam('kind') || '-999',
        keywords: this.$getUrlParam('keywords') || '',
      },
      cate: {show: false}, // 选中的套餐
      qr_prod: {show: false}, // 点击的二维码的产品
      add_prod: {show: false}, // 点击加价转发的产品
    }
  },
  methods: {
    // 搜索方法
    search(param) {
      this.listFilter = {
        sort: param.sort,
        kind: param.kind,
        zone_id: param.zone_id,
        keywords: param.keywords
      }
    },
    // 点击各个弹窗
    checkToDialog(type, obj){
      switch(type) {
        case 'cate': 
          this.$refs.dialog_cate.init()
          break
        case 'qr_prod': 
          this.$refs.dialog_qrcode.init()
          break
        case 'add_prod':
          this.$refs.dialog_price.init()
          break
      }
      this[type] = obj
    },
    // 排序
    changeSort(sort) {
      this.listFilter.sort = Number(sort)
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@style_pc/basic/utils/index";
.sort-tab {
  padding: 0 20px;
  line-height: 30px;
  border-bottom: @border-default;
  .ucai-icon {
    display: none;
  }
  .c-main .ucai-icon {
    display: inherit;
  }
  span {
    cursor: pointer;
  }
}
</style>